<template>
	<view class="page">
		<view class="cart-list">
			<view v-for="(item, index) in cartList" :key="index" class="cart-item">
				<view class="checkbox">
					<checkbox :checked="item.selected" @click="toggleSelect(index)" color="#ff6b81" />
				</view>
				<view class="item-content">
					<view class="item-left">
						<view class="item-image">
							<image src="/static/icons/cart-item.svg" mode="aspectFit" class="icon"></image>
						</view>
						<view class="item-info">
							<text class="item-name">{{item.name}}</text>
							<text class="item-price">¥{{item.price}}</text>
						</view>
					</view>
					<view class="item-right">
						<view class="quantity-control">
							<text class="minus" @click="decreaseQuantity(index)">-</text>
							<input type="number" v-model="item.quantity" class="quantity-input" />
							<text class="plus" @click="increaseQuantity(index)">+</text>
						</view>
					</view>
				</view>
				<view class="delete-btn" @click="deleteItem(index)">
					<image src="/static/icons/delete.svg" mode="aspectFit" class="icon"></image>
				</view>
			</view>
		</view>
		
		<view class="cart-footer">
			<view class="select-all">
				<checkbox :checked="isAllSelected" @click="toggleSelectAll" color="#ff6b81" />
				<text>全选</text>
			</view>
			<view class="total">
				<text>总计：</text>
				<text class="total-price">¥{{selectedTotalPrice}}</text>
			</view>
			<button class="checkout-btn" @click="checkout" :disabled="!hasSelected">结算({{selectedQuantity}})</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 模拟购物车数据
const cartList = ref([
	{
		id: 1,
		name: '商品1',
		price: 99.00,
		quantity: 1,
		selected: false
	},
	{
		id: 2,
		name: '商品2',
		price: 199.00,
		quantity: 2,
		selected: false
	},
	{
		id: 3,
		name: '商品3',
		price: 299.00,
		quantity: 1,
		selected: false
	}
])

// 是否全选
const isAllSelected = computed(() => {
	return cartList.value.length > 0 && cartList.value.every(item => item.selected)
})

// 是否有选中商品
const hasSelected = computed(() => {
	return cartList.value.some(item => item.selected)
})

// 选中商品总价
const selectedTotalPrice = computed(() => {
	return cartList.value.reduce((total, item) => {
		return total + (item.selected ? item.price * item.quantity : 0)
	}, 0).toFixed(2)
})

// 选中商品总数量
const selectedQuantity = computed(() => {
	return cartList.value.reduce((total, item) => {
		return total + (item.selected ? item.quantity : 0)
	}, 0)
})

// 切换商品选中状态
const toggleSelect = (index) => {
	cartList.value[index].selected = !cartList.value[index].selected
}

// 切换全选状态
const toggleSelectAll = () => {
	const newState = !isAllSelected.value
	cartList.value.forEach(item => {
		item.selected = newState
	})
}

// 增加商品数量
const increaseQuantity = (index) => {
	cartList.value[index].quantity++
}

// 减少商品数量
const decreaseQuantity = (index) => {
	if (cartList.value[index].quantity > 1) {
		cartList.value[index].quantity--
	}
}

// 删除商品
const deleteItem = (index) => {
	uni.showModal({
		title: '提示',
		content: '确定要删除这个商品吗？',
		success: (res) => {
			if (res.confirm) {
				cartList.value.splice(index, 1)
			}
		}
	})
}

// 结算
const checkout = () => {
	if (!hasSelected.value) {
		uni.showToast({
			title: '请选择商品',
			icon: 'none'
		})
		return
	}
	uni.navigateTo({
		url: '/pages/cart/order'
	})
}
</script>

<style>
.page {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.cart-list {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
}

.cart-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
	position: relative;
	overflow: hidden;
}

.checkbox {
	margin-right: 20rpx;
}

.item-content {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.item-left {
	display: flex;
	align-items: center;
}

.item-image {
	width: 160rpx;
	height: 160rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	margin-right: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.item-info {
	display: flex;
	flex-direction: column;
}

.item-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
}

.item-price {
	font-size: 32rpx;
	color: #ff6b81;
	font-weight: bold;
}

.item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.quantity-control {
	display: flex;
	align-items: center;
}

.minus, .plus {
	width: 60rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	background-color: #f5f5f5;
	border-radius: 30rpx;
}

.quantity-input {
	width: 80rpx;
	height: 60rpx;
	text-align: center;
	margin: 0 10rpx;
}

.delete-btn {
	position: absolute;
	right: -140rpx;
	top: 0;
	bottom: 0;
	width: 140rpx;
	background-color: #ff6b81;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: right 0.3s;
}

.cart-item:active .delete-btn {
	right: 0;
}

.cart-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.select-all {
	display: flex;
	align-items: center;
}

.select-all text {
	margin-left: 10rpx;
	font-size: 28rpx;
}

.total {
	font-size: 28rpx;
}

.total-price {
	color: #ff6b81;
	font-size: 36rpx;
	font-weight: bold;
}

.checkout-btn {
	background-color: #ff6b81;
	color: #fff;
	font-size: 28rpx;
	padding: 0 40rpx;
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 35rpx;
}

.checkout-btn[disabled] {
	background-color: #ccc;
}

.icon {
	width: 100%;
	height: 100%;
}
</style>
